<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录</title>
    <link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
    <link rel="stylesheet" href="../static/bootstrap/css/bootstrapValidator.min.css" th:href="@{/bootstrap/css/bootstrapValidator.min.css}">
</head>

<body>

<nav th:replace="fragments :: menu(5)" class="nav navbar-inverse"></nav>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="container lucency-xs animated fadeInDownBig">

    <div class="row">
       <div class="col-sm-6 col-sm-offset-3  col-md-4 col-md-offset-4" >
           <form id="loginform" role="form" action="/user/login" th:action="@{/user/login}" method="post">
              <div class="panel panel-info rounded-size-sm">
                  <div class="panel-heading text-center rounded-size-sm-top">
                      <h2>登录<small>login</small></h2>
                  </div>
                  <div class="panel-body">
                      <div class="form-group">
                          <label for="username_text">用户名</label>
                          <input type="text" class="form-control" name="username" id="username_text" placeholder="用户名...">
                      </div>
                      <div class="form-group">
                          <label for="password_text">密码</label>
                          <input type="password" class="form-control" name="password" id="password_text" placeholder="密码...">
                      </div>

                      <div class="checkbox">
                          <label class="label text-color-bloack">
                              <input type="checkbox" id="remember" name="rememberUser">记住我
                          </label>
                      </div>

                         <input type="button" onclick="submitForm();" id="form_btn_login" class="btn btn-success btn-group-justified" value="提交"><br>

                  </div>
              </div>
           </form>
       </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3  col-md-4 col-md-offset-4" >
            <div class="alert alert-danger" th:unless="${#strings.isEmpty(message)}" th:text="${message}">

            </div>
        </div>
    </div>

</div>

<!--/*/<th:block th:replace="fragments :: script">/*/-->
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <!--加载bootstrap验证器-->
    <script src="../static/bootstrap/js/bootstrapValidator.min.js" th:src="@{/bootstrap/js/bootstrapValidator.min.js}"></script>
<!--/*/</th:block>/*/-->

<script>
    
    //提交表单
    function submitForm(){
        var ifchoose = $("#remember").prop("checked");
        var username = $("#username_text").val();
        var password = $("#password_text").val();
        if (ifchoose && username != "" && password != ""){
            localStorage.setItem("username",username);
            localStorage.setItem("password",password);
        }else{
            localStorage.setItem("username","");
            localStorage.setItem("password","");
        }

       //document.getElementById("loginform").submit();
        var loginBtn = $("#form_btn_login");
        loginBtn.attr("type","submit");
        loginBtn.click();


    }


    $(function () {
        $('form').bootstrapValidator({

            message: '错误!!',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        }
                    }
                }
            }
        });
    });
</script>

</body>
</html>